<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>View Order</title>
</head>
<body>
<header th:replace="common/top"></header>

<div id="BackLink">
  <a th:href="@{/catalog/index}">Return to Main Menu</a>
</div>

<div id="Catalog">
  <table>
    <tr>
      <th align="center" colspan="2">
        Order #<span th:text="${order.orderId}"></span>
        <span th:if="${order.orderDate != null}" th:text="${#dates.format(order.orderDate, 'yyyy/MM/dd HH:mm:ss')}"></span>
      </th>
    </tr>
    <tr>
      <th colspan="2">Payment Details</th>
    </tr>
    <tr>
      <td>Card Type:</td>
      <td th:text="${order.cardType}"></td>
    </tr>
    <tr>
      <td>Card Number:</td>
      <td th:text="${order.creditCard} + ' * Fake number!'"></td>
    </tr>
    <tr>
      <td>Expiry Date (MM/YYYY):</td>
      <td th:text="${order.expiryDate}"></td>
    </tr>

    <tr>
      <th colspan="2">Billing Address</th>
    </tr>
    <tr>
      <td>First name:</td>
      <td th:text="${order.billToFirstName}"></td>
    </tr>
    <tr>
      <td>Last name:</td>
      <td th:text="${order.billToLastName}"></td>
    </tr>
    <tr>
      <td>Address 1:</td>
      <td th:text="${order.billAddress1}"></td>
    </tr>
    <tr>
      <td>Address 2:</td>
      <td th:text="${order.billAddress2}"></td>
    </tr>
    <tr>
      <td>City:</td>
      <td th:text="${order.billCity}"></td>
    </tr>
    <tr>
      <td>State:</td>
      <td th:text="${order.billState}"></td>
    </tr>
    <tr>
      <td>Zip:</td>
      <td th:text="${order.billZip}"></td>
    </tr>
    <tr>
      <td>Country:</td>
      <td th:text="${order.billCountry}"></td>
    </tr>

    <tr>
      <th colspan="2">Shipping Address</th>
    </tr>
    <tr>
      <td>First name:</td>
      <td th:text="${order.shipToFirstName}"></td>
    </tr>
    <tr>
      <td>Last name:</td>
      <td th:text="${order.shipToLastName}"></td>
    </tr>
    <tr>
      <td>Address 1:</td>
      <td th:text="${order.shipAddress1}"></td>
    </tr>
    <tr>
      <td>Address 2:</td>
      <td th:text="${order.shipAddress2}"></td>
    </tr>
    <tr>
      <td>City:</td>
      <td th:text="${order.shipCity}"></td>
    </tr>
    <tr>
      <td>State:</td>
      <td th:text="${order.shipState}"></td>
    </tr>
    <tr>
      <td>Zip:</td>
      <td th:text="${order.shipZip}"></td>
    </tr>
    <tr>
      <td>Country:</td>
      <td th:text="${order.shipCountry}"></td>
    </tr>
    <tr>
      <td>Courier:</td>
      <td th:text="${order.courier}"></td>
    </tr>
    <tr>
      <td colspan="2">Status: <span th:text="${order.status}"></span></td>
    </tr>

    <tr>
      <td colspan="2">
        <table>
          <tr>
            <th>Item ID</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Total Cost</th>
          </tr>

          <tr th:each="lineItem : ${order.lineItems}">
            <td>
              <a th:href="@{/itemForm(event='viewItem', itemId=${lineItem.item.itemId})}" th:text="${lineItem.item.itemId}"></a>
            </td>
            <td>
                                <span th:if="${lineItem.item != null}">
                                    <span th:text="${lineItem.item.attribute1}"></span>
                                    <span th:text="${lineItem.item.attribute2}"></span>
                                    <span th:text="${lineItem.item.attribute3}"></span>
                                    <span th:text="${lineItem.item.attribute4}"></span>
                                    <span th:text="${lineItem.item.attribute5}"></span>
                                    <span th:text="${lineItem.item.product.name}"></span>
                                </span>
              <span th:unless="${lineItem.item != null}"><i>{description unavailable}</i></span>
            </td>
            <td th:text="${lineItem.quantity}"></td>
            <td th:text="${#numbers.formatCurrency(lineItem.unitPrice)}"></td>
            <td th:text="${#numbers.formatCurrency(lineItem.total)}"></td>
          </tr>

          <tr>
            <th colspan="5">Total: <span th:text="${#numbers.formatCurrency(order.totalPrice)}"></span></th>
          </tr>
        </table>
      </td>
    </tr>

  </table>
</div>
</body>
</html>